<template>
  <div class="box">
    <div class="login">
      <!-- 用户图案 -->
      <div class="avatar-box">
        <img class="user-img" src="~assets/img/login/user.svg" alt="">
      </div>
      <!-- 表单 -->
      <div class="inputs"> 
        <el-form 
              :model="loginForm" 
              :rules="rules" 
              ref="form"
              :hide-required-asterisk="true">
          <el-form-item label="用户" prop="username">
            <el-input 
                  placeholder="请输入用户名/手机号/邮箱"
                  prefix-icon="el-icon-user-solid"
                  v-model="loginForm.username"
                  clearable />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
                  type="password" 
                  placeholder="请输入密码"
                  prefix-icon="el-icon-unlock"
                  v-model="loginForm.password"
                  clearable />
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button type="primary" class="subBtn" @click="login">登录</el-button> 
          <el-button type="info" class="regBtn" @click="register">注册</el-button>
        </div>
      </div> 
     
      <!-- 更多登陆方式 -->
      <div class="loginMore">
        <span>
          <img src="~assets/img/login/Phone.svg" alt="">
        </span>
        <span @click="wechatLogin">
          <img src="~assets/img/login/Wechat.svg" alt="">
        </span>
        <span>
          <img src="~assets/img/login/QQ.svg" alt="">
        </span>
      </div>
    </div>
    
    <!-- 微信二维码 -->
    <el-dialog :visible.sync="wechatloginImg" width="30%" :modal="false">
      <div class="qrcode">
        <img src="~assets/img/login/wechat-QRcode.svg" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: 'Login',
    data() {
      const v_username = (rule, value, callback) => {
        const username = /[\w-_]{6,15}$/;
        if (!value) {
          return callback(new Error('用户名不能为空'));
        } else if (!username.test(value)) {
          return callback(new Error('用户名无效'));
        } else {
          callback();
        }
      };
      const v_password = (rule, value, callback) => {
        const passwd = /^[\w-_.]{6,12}$/;
        if (!value) {
          return callback(new Error('密码不能为空'));
        } else if (!passwd.test(value)) {
          return callback(new Error('密码无效'));
        } else {
          callback();
        }
      }
      return {
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          // 验证用户名
          username: [
            { validator: v_username, trigger: 'blur'}
          ],
          // 验证密码
          password: [
            { validator: v_password, trigger: 'blur'}
          ]
        },
        userList: [],
        userInfo: [],
        wechatloginImg: false,
      }
    },
    methods: {
      // 注册
      register() {
        this.$router.push('/register')
      },
      // 获取用户信息
      async getUser() {
        const {data: res} = await this.axios.get('http://localhost:3000/posts');
        // console.log(res);
        this.userList = res
        for (let i = 0; i < this.userList.length; i++) {
          if (this.userList[i].username && this.userList[i].password) {
            console.log(this.userList[i].username + '--' + this.userList[i].password);
          }
          let user = {
            username: this.userList[i].username,
            password: this.userList[i].password
          }
          this.userInfo.push(user)
        }
        console.log(this.userInfo);
      },
      // 登录
      login() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false
          } else {
          // 用户名密码验证

          
        
          // 用户登陆成功后 从服务器返回 一个 token
          // token 保存到 window.sessionStorage 中， 只能在当前网站打开期间生效
          // window.sessionStorage.setItem("token", res.data.token)     保存的键：token，值：res.data.token
        

          // 用户验证成功， 跳转后台主页
          // this.$router.push('/home');
          }
        });
      },
      // 重置表单
      resetForm() {
        this.$refs.form.resetFields()
      },
      // 微信登录
      wechatLogin() {
        this.wechatloginImg = true
      },
    },
    mounted() {
      this.getUser();
    }
  }
</script>

<style lang="less" scoped>
  .box {
    width: 100%;
    height: 100%;
    background-color: #283443;
    position: fixed;
  }
  .box > .login {
    width: 30%;
    height: auto;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;

    .avatar-box {
      width: 70px;
      border: 1px solid #eee;
      border-radius: 50%;
      box-shadow: 0 0 10px #ddd;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      .user-img {
        width: 100%;
      }
    }
    .inputs {
      padding: 20px 50px 0;
      .el-form-item {
        margin-bottom: 10px;
      }
      .btn {
        text-align: center;
        margin-top: 20px;
      }
      .subBtn {
        width: 45%;
      }
      .regBtn {
        width: 45%;
      }
    }
  }
  .loginMore {
    text-align: center;
    padding: 30px 50px;
    display: flex;
    span {
      flex: 1;
    }
  }
  .el-dialog {
    margin-top: 100px;
    .qrcode {
      text-align: center;
    }
  }
</style>
